<template>
	<!-- 物料出入库导出页面 -->
	<a-card :bordered="false">
		<!-- 顶部筛选 -->
		<div class="table-page-search-wrapper">
			<a-form layout="inline" labelAlign="right">
				<a-row :gutter="48">
					<a-col :md="8" :sm="24">
						<a-form-item label="选择时间">
							<a-range-picker style="width:100%" v-model="queryParam.timeList" format="YYYY-MM-DD" />
						</a-form-item>
					</a-col>
					<a-col :md="12" :sm="24">
						<a-form-item label="BOM类型">
							<div>
								<a-radio-group v-model="queryParam.bomType" button-style="solid">
									<a-radio-button :value="item.id" v-for="(item, index) in $businessEnum.BOM_TYPE_ENUM" :key="index">
										{{ item.name }}
									</a-radio-button>
								</a-radio-group>
							</div>
						</a-form-item>
					</a-col>

					<a-col :md="8" :sm="24">
						<span class="table-page-search-submitButtons">
							<a-button type="primary" @click="$refs.table.refresh(true)">查询</a-button>
							<a-button type="" @click="() => { queryParam = { bomType: 1 }; $refs.table.refresh(true) }">重置</a-button>
						</span>
					</a-col>
				</a-row>
			</a-form>
		</div>
		<!-- 表格 -->
		<s-table ref="table" style="margin-top: 15px;" size="default" :columns="columns" :data="loadData" :alert="true">
			<!-- <span slot="image" slot-scope="text">
				<image-preview :images="text" />
      </span> -->
			<span slot="image" slot-scope="text,record">
				<image-preview1 :images="text" :imageUrl="record.imageUrl" />
			</span>
		</s-table>
	</a-card>
</template>

<script>
import { STable } from '@/components'
import { page } from '@/api/modular/main/bomRanking'


export default {
	components: {
		STable,
	},
	data() {
		return {
			queryParam: {
				bomType: 1,
			},  // 查询参数
			columns: [
				{
					title: '排名',
					width: '80px',
					align: 'center',
					customRender: (text, record, index) => `${index + 1}`,
				},
				{
					title: 'BOM名称',
					dataIndex: 'bomName',
					ellipsis: true
				},
				{
					title: 'BOM编码',
					dataIndex: 'bomCode',
					ellipsis: true
				},
				{
					title: '图片',
					dataIndex: 'image',
					scopedSlots: { customRender: 'image' }
				},
				{
					title: '分类',
					dataIndex: 'bomClassName'
				},
				{
					title: '引用次数',
					dataIndex: 'times'
				},
			],
			// 加载数据方法 必须为 Promise 对象
			loadData: parameter => {
				let query = {
					...this.queryParam,
					...parameter,
					// orderType: this.orderType,
					startTime: this.appendTime(this.queryParam.timeList)[0],
					endTime: this.appendTime(this.queryParam.timeList)[1],
				}
				delete query.timeList
				return page(query).then((res) => {
					return res.data
				})
			},
		}
	},
	methods: {
	}
}
</script>

<style lang="less">
.table-operator {
	margin-bottom: 18px;
}

button {
	margin-right: 8px;
}
</style>
